import { Col, Row, Divider, Button, Modal } from "antd";
import * as React from "react";
import { AjaxData } from "../../../../data/interface/publicInterface";
import moment from "moment";
import { getHealthyData } from "../ServeApi";
import DancingNum from "../../../../compontents/DancingNum";
import icon_anquanpinggu from "../../../../assets/img/dianqianquan/icon_anquanpinggu.png";
//漏电检测
import loudianjiance from "../../../../assets/img/ScoringDetails/loudianjiance.png";
import tongxincuowu from "../../../../assets/img/ScoringDetails/tongxincuowu.png";
import huojing from "../../../../assets/img/ScoringDetails/huojing.png";
//温度检测
import wendujiance from "../../../../assets/img/ScoringDetails/wendujiance.png";
import wendu from "../../../../assets/img/ScoringDetails/wendu.png";
//电源检测
import dianyuanjiance from "../../../../assets/img/ScoringDetails/dianyuanjiance.png";
import dianliutubian from "../../../../assets/img/ScoringDetails/dianliutubian.png";
import dianyabuwen from "../../../../assets/img/ScoringDetails/dianyabuwen.png";
import dianyachaoxian from "../../../../assets/img/ScoringDetails/dianyachaoxian.png";
//供电质量
import gongdianzhiliang from "../../../../assets/img/ScoringDetails/gongdianzhiliang.png";
import shebeilixian from "../../../../assets/img/ScoringDetails/shebeilixian.png";
import shebeiguzhang from "../../../../assets/img/ScoringDetails/shebeiguzhang.png";
import "./index.less";

export interface ScoringDetailsProps {}

export interface ScoringDetailsState {}

class ScoringDetails extends React.Component<
  ScoringDetailsProps,
  ScoringDetailsState
> {
  private clientWidth = 1920;
  private dataSouce: any = null;
  private mockdate: any = {
    days: 0,
    total: 0,
    onLine: 0,
    offLine: 0,
    scoreEle: {
      total: 0,
      totalScore: 0,
      one: 0,
      oneScore: 0,
      two: 0,
      twoScore: 0,
    },
    scoreLoseEle: {
      total: 0,
      totalScore: 0,
      one: 0,
      oneScore: 0,
      two: 0,
      twoScore: 0,
    },
    scorePower: {
      total: 0,
      totalScore: 0,
      one: 0,
      oneScore: 0,
      two: 0,
      twoScore: 0,
      three: 0,
      threeScore: 0,
    },
    scoreTemperature: { total: 0, totalScore: 0 },
  };
  componentDidMount() {
    this.screenChange();
  }
  /**监听屏幕变化 */
  screenChange() {
    window.addEventListener("resize", (event) => {
      this.hasResize(event);
    });
    this.clientWidth = document.body.clientWidth;
    this.forceUpdate();
  }
  hasResize(rl) {
    let inWidth = rl.target.innerWidth;
    this.clientWidth = inWidth;
    this.forceUpdate();
  }
  /**数据请求 */
  //运行健康分析，安全评估
  async getHealthyData() {
    try {
      let pream = {
        start: moment().add(-7, "day").valueOf(),
      };
      let res: any = await getHealthyData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.dataSouce = json.data;
        this.forceUpdate();
      }
    } catch (error) {
      Modal.error({
        title: `初始化运行健康分析失败，无法读取运行健康分析，请刷新页面。`,
      });
    }
  }
  componentWillMount() {
    this.getHealthyData();
  }
  render() {
    let { dataSouce } = this;
    return (
      <div className="ScoringDetails">
        <Row>
          <Col span={24}>
            <div className="title">
              <img src={icon_anquanpinggu} alt="系统评分详情" />
              系统评分详情
            </div>
            <div className="total">
              <Button
                className="reset"
                type="primary"
                style={this.clientWidth < 800 ? { top: 90 } : {}}
                onClick={() => {
                  this.dataSouce = this.mockdate;
                  this.forceUpdate();
                  this.getHealthyData();
                }}
              >
                刷新
              </Button>
              <h1>
                系统整体评分
                <span>
                  <DancingNum
                    number={
                      dataSouce
                        ? dataSouce.scoreEle.totalScore +
                          dataSouce.scoreLoseEle.totalScore +
                          dataSouce.scorePower.totalScore +
                          dataSouce.scoreTemperature.totalScore
                        : 0
                    }
                  />
                </span>
                分
              </h1>
              <Row>
                <Col xs={12} sm={12} md={12} lg={12} xl={4} xxl={4}>
                  漏电检测
                  <span>
                    <DancingNum
                      number={dataSouce ? dataSouce.scoreLoseEle.totalScore : 0}
                    />
                  </span>
                  分<div className="line"></div>
                </Col>
                <Col xs={12} sm={12} md={12} lg={12} xl={4} xxl={4}>
                  温度检测
                  <span>
                    <DancingNum
                      number={
                        dataSouce ? dataSouce.scoreTemperature.totalScore : 0
                      }
                    />
                  </span>
                  分
                  {this.clientWidth > 1200 ? (
                    <div className="line"></div>
                  ) : null}
                </Col>
                <Col xs={12} sm={12} md={12} lg={12} xl={4} xxl={4}>
                  电源检测
                  <span>
                    <DancingNum
                      number={dataSouce ? dataSouce.scorePower.totalScore : 0}
                    />
                  </span>
                  分<div className="line"></div>
                </Col>
                <Col xs={12} sm={12} md={12} lg={12} xl={4} xxl={4}>
                  供电质量
                  <span>
                    <DancingNum
                      number={dataSouce ? dataSouce.scoreEle.totalScore : 0}
                    />
                  </span>
                  分
                </Col>
              </Row>
            </div>
            <Divider />
            <div className="Details">
              <Row>
                <Col span={12}>
                  <div
                    className="litd"
                    style={{
                      backgroundImage: "url(" + loudianjiance + ")",
                    }}
                  >
                    漏电检测
                    <span>
                      （总分{dataSouce ? dataSouce.scoreLoseEle.total : 0}
                      分）
                    </span>
                  </div>
                  <div className="libd">
                    <Row>
                      <Col span={6}>
                        <div className="item">
                          <img src={tongxincuowu} alt="通信错误" />
                          <p>通信错误</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce
                                    ? dataSouce.scoreLoseEle.twoScore
                                    : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                      <Col span={6}>
                        <div className="item">
                          <img src={huojing} alt="火警" />
                          <p>火警</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce
                                    ? dataSouce.scoreLoseEle.oneScore
                                    : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Col>
                <Col span={12}>
                  <div
                    className="litd"
                    style={{
                      backgroundImage: "url(" + wendujiance + ")",
                    }}
                  >
                    温度检测
                    <span>
                      （总分
                      {dataSouce ? dataSouce.scoreTemperature.total : 0}
                      分）
                    </span>
                  </div>
                  <div className="libd">
                    <Row>
                      <Col span={6}>
                        <div className="item">
                          <img src={wendu} alt="温度超限" />
                          <p>温度超限</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce
                                    ? dataSouce.scoreTemperature.totalScore
                                    : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Col>
                <Col span={12}>
                  <div
                    className="litd"
                    style={{
                      backgroundImage: "url(" + dianyuanjiance + ")",
                    }}
                  >
                    电源检测
                    <span>
                      （总分{dataSouce ? dataSouce.scorePower.total : 0}
                      分）
                    </span>
                  </div>
                  <div className="libd">
                    <Row>
                      <Col span={6}>
                        <div className="item">
                          <img src={dianliutubian} alt="电流突变" />
                          <p>电流突变</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce ? dataSouce.scorePower.oneScore : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                      <Col span={6}>
                        <div className="item">
                          <img src={dianyabuwen} alt="电压不稳" />
                          <p>电压不稳</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce ? dataSouce.scorePower.twoScore : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                      <Col span={6}>
                        <div className="item">
                          <img src={dianyachaoxian} alt="电压超限" />
                          <p>电压超限</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce
                                    ? dataSouce.scorePower.threeScore
                                    : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Col>
                <Col span={12}>
                  <div
                    className="litd"
                    style={{
                      backgroundImage: "url(" + gongdianzhiliang + ")",
                    }}
                  >
                    供电质量
                    <span>
                      （总分{dataSouce ? dataSouce.scoreEle.total : 0}
                      分）
                    </span>
                  </div>
                  <div className="libd">
                    <Row>
                      <Col span={6}>
                        <div className="item">
                          <img src={shebeilixian} alt="设备离线" />
                          <p>设备离线</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce ? dataSouce.scoreEle.oneScore : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                      <Col span={6}>
                        <div className="item">
                          <img src={shebeiguzhang} alt="设备故障" />
                          <p>设备故障</p>
                          <p>
                            <span>
                              <DancingNum
                                number={
                                  dataSouce ? dataSouce.scoreEle.twoScore : 0
                                }
                              />
                            </span>
                            分
                          </p>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default ScoringDetails;
